//一、 根据数据渲染分类条
// console.log(goodData);

function renderNavigator(path) {
  console.log(path);
  // 先把分类条里的内容清空掉；
  var ele = document.querySelector(".conPoint");
  ele.innerHTML = "";
  // 根据path 数据生成对应的dom结构
  path.forEach(function (item) {
    var aEle = document.createElement("a");
    aEle.innerHTML = item.title;
    if (typeof item.url !== "undefined") {
      aEle.href = item.url;
    }
    ele.appendChild(aEle);
  });
}
renderNavigator(goodData.path);

// 二 、渲染 产品的详细内容
function renderProductDetail(goodsDetail) {
  var priceAreaEle = document.querySelector(".priceArea");
  priceAreaEle.innerHTML = `<h3 class="title">${goodsDetail.title}</h3>
  <p class="con1">${goodsDetail.recommend}</p>
  <div class="price">
      <div class="priceDetail">
          <p>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p>
          <p>￥ <span>${goodsDetail.price}</span> 元</p>
      </div>
      <div class="buy">
          <p>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</p>
          <p><span>${goodsDetail.promoteSales.type}</span>${goodsDetail.promoteSales.content}</p>
      </div>
  </div>
  <div class="support">
      <div class="supportDetail">
          <p>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</p>
          <p>${goodsDetail.support}</p>
      </div>
      <div class="address">
          <p>配&nbsp;送&nbsp;至</p>
          <p>${goodsDetail.address}</p>
      </div>
  </div>`;
}

renderProductDetail(goodData.goodsDetail);

//三、 根据数据渲染 型号选择区域
//四、点击型号 选择对应的型号 ； 点击删除的时候 去掉 对应型号的样式
// 五、计算 价钱

var typeArr = [];

function renderType(crumbData) {
  var chooseAreaEle = document.querySelector(".chooseArea");
  chooseAreaEle.innerHTML = "";
  crumbData.forEach(function (item, k) {
    var dlEle = document.createElement("dl");
    var dtEle = document.createElement("dt");
    dtEle.innerHTML = item.title;
    dlEle.appendChild(dtEle);
    item.data.forEach(function (val, kk) {
      var ddEle = document.createElement("dd");
      ddEle.innerHTML = val.type;
      ddEle.showText = ddEle.innerHTML;
      ddEle.k = k; // 在dd对象里记录 当前的行数；
      ddEle.kk = kk; // 在dd对象里记录当前dd的列数；
      if (kk == 0) {
        typeArr.push(ddEle);
      }
      // 当dd生成的时候 立刻绑定点击事件；
      ddEle.onclick = function () {
        // 把当前行的dd所有选择的样式 去掉；
        // console.log("点击了dd按钮",dlEle);
        // 在当前dl行里查找所有的dd
        var dds = dlEle.querySelectorAll("dd");

        console.log("点击的行数是？", k);
        typeArr[k] = this;
        this.showText = this.innerHTML;
        console.log(typeArr);
        renderChioseType(typeArr);

        // 所有的dd的样式去掉
        dds.forEach(function (dd) {
          dd.style.color = "#666";
        });

        this.style.color = "red";
      };

      dlEle.appendChild(ddEle);
    });

    chooseAreaEle.appendChild(dlEle);
  });
  console.log(typeArr); // 存放选中型号元素的数组 ；
  renderChioseType(typeArr);
}

renderType(goodData.goodsDetail.crumbData);

function renderChioseType(typeArr) {
  // 获取手机的初始价钱 ；
  var price = goodData.goodsDetail.price;
  // typeArr = [dd,dd,dd,dd];
  var chooseInsertEle = document.querySelector(".chooseInsert");
  chooseInsertEle.innerHTML = "";
  typeArr.forEach(function (item) {
    if (item.showText) {
      var markEle = document.createElement("mark");
      markEle.innerHTML = `${item.showText} <a>X</a>`;

      // 给删除按钮绑定事件
      var closeBtn = markEle.querySelector("a");
      closeBtn.onclick = function () {
        console.log("点击了关闭", item.k);
        // 获取所有的dl
        var dls = document.querySelectorAll(".chooseArea dl");
        var dds = dls[item.k].querySelectorAll("dd");
        console.log(dds);
        dds.forEach(function (val) {
          val.style.color = "#666";
        });

        typeArr[item.k].showText = "";
        renderChioseType(typeArr);
      };
      chooseInsertEle.appendChild(markEle);
      // console.log(item,"行:"+item.k+";列:"+item.kk);
      // 通过 行 和 列 在 data 数据里查找 changePrice
      console.log(
        goodData.goodsDetail.crumbData[item.k].data[item.kk].changePrice
      );
      price += goodData.goodsDetail.crumbData[item.k].data[item.kk].changePrice;
    }
  });
  console.log("最终的价钱", price);
  // 单价在乘以数量
  var productNum = document.querySelector(".num input").value;
  // console.log(productNum);
  price *= productNum;
  document.querySelector(".priceDetail span").innerHTML = price;

  // 组合价钱的修改
  var ele = document.querySelector(".master p");
  ele.innerHTML = "￥" + price;

  document.querySelector(".result .price").innerHTML = "￥" + price;
}

// 点击添加或者减少数量
// 获取添加按钮
var plusEle = document.querySelector(".plus");
var minsEle = document.querySelector(".mins");
var myinput = document.querySelector(".num input");
// 添加产品的数量
plusEle.onclick = function () {
  myinput.value++;
  renderChioseType(typeArr);
};

// 减少产品的数量
minsEle.onclick = function () {
  if (myinput.value > 1) {
    myinput.value--;
    renderChioseType(typeArr);
  }
};

// 六、计算组合价钱；
var checkboxEles = document.querySelectorAll(".suits input");
checkboxEles.forEach(function (item) {
  item.onclick = function () {
    // 获取当前产品的价格
    var price = parseInt(document.querySelector(".priceDetail span").innerHTML);
    console.log(price);
    checkboxEles.forEach(function (val) {
      if (val.checked) {
        price += parseInt(val.value);
      }
    });
    console.log(price);
    document.querySelector(".result .price").innerHTML = "￥" + price;
  };
});

// --------------------------------放大镜逻辑-----------------------------

// 一 、鼠标移入 产品图片区域的时候 蒙版显示出来
var smallAreaEle = document.querySelector(".smallArea");
var maskEle = document.querySelector(".mask");
var bigArea = document.querySelector(".bigArea");
var listEle = document.querySelector(".list");

//根据数据渲染图片
// 点击小图的时候 可以切换产品 及放大的产品图片；
function renderImg(imgsrcs) {
  imgsrcs.forEach(function (img, k) {
    var liEle = document.createElement("li");
    liEle.innerHTML = `<img src="${img.s}" />`;
    listEle.appendChild(liEle);
    // 给每一个li绑定点击事件
    liEle.onclick = function () {
      // 把其他li的边框去掉
      var imgs = document.querySelectorAll(".list img");
      imgs.forEach(function (img) {
        img.style.border = "";
      });

      console.log("点击图片的索引值是:", imgsrcs[k]);
      // 替换产品区域的图片
      smallAreaEle.querySelector("img").src = imgsrcs[k].b;
      // 替换放大区域的图片
      bigArea.querySelector("img").src = imgsrcs[k].b;

      // this.style.border = "1px solid red";
      this.querySelector("img").style.border = "1px solid red";
    };
  });
}

renderImg(goodData.imgsrc);

// 移入移除 ： onmouseenter  和  onmouseleave  ：不会在子元素上触发
//            onmouseover  和 onmouseout  ： 会在子元素上触发事件  ，可以做事件委托
smallAreaEle.onmouseenter = function () {
  maskEle.style.display = "block";
  bigArea.style.display = "block";
};

smallAreaEle.onmouseleave = function () {
  maskEle.style.display = "none";
  bigArea.style.display = "none";
};

// 鼠标移动的时候 蒙版需要跟随鼠标的移动而移动 ；

smallAreaEle.onmousemove = function (e) {
  var x = e.clientX - this.getBoundingClientRect().left;
  var y = e.clientY - this.getBoundingClientRect().top;
  // var y = e.pageY - 230;  鼠标距离页面的上边距 - smallArae距离页面上面的距离
  var maskLeft = x - maskEle.offsetWidth / 2;
  var maskTop = y - maskEle.offsetHeight / 2;
  // 左右的极限距离
  if (maskLeft <= 0) {
    maskLeft = 0;
  }
  if (maskLeft >= smallAreaEle.offsetWidth - maskEle.offsetWidth) {
    maskLeft = smallAreaEle.offsetWidth - maskEle.offsetWidth;
  }

  //上下的极限距离
  if (maskTop <= 0) {
    maskTop = 0;
  }

  if (maskTop >= smallAreaEle.offsetHeight - maskEle.offsetHeight) {
    maskTop = smallAreaEle.offsetHeight - maskEle.offsetHeight;
  }

  // 计算放大的比例
  // 计算x轴的比例
  var numx = maskEle.offsetLeft;
  var maskWidth = smallAreaEle.offsetWidth;
  var imgWidth = document.querySelector(".bigArea img").offsetWidth;
  // 计算y轴的比例
  var numy = maskEle.offsetTop;
  var maskHeight = smallAreaEle.offsetHeight;
  var imgHeight = document.querySelector(".bigArea img").offsetHeight;

  // console.log(numx,maskWidth,imgWidth);
  var disx = (numx / maskWidth) * imgWidth;
  var disy = (numy / maskHeight) * imgHeight;
  document.querySelector(".bigArea img").style.left = -disx + "px";
  document.querySelector(".bigArea img").style.top = -disy + "px";

  maskEle.style.left = maskLeft + "px";
  maskEle.style.top = maskTop + "px";
};

// 点击下一个的时候切换产品 ；
var rightBtn = document.querySelector(".right");
var lis = listEle.querySelectorAll("li");
// console.log(lis);
var num = lis[0].offsetWidth;
rightBtn.onclick = debounce(function () {
  // 点击右侧的时候在原有的基础上 加上一个li的一个宽度
  var leftNum = parseInt(getComputedStyle(listEle)["left"]);
  if (leftNum < -num * 9) {
    leftNum = -num * 9;
  }
  listEle.style.left = leftNum - num + "px";
}, 900);

// 点击上一个按钮的时候 切换产品
var leftBtn = document.querySelector(".left");
leftBtn.onclick = debounce(function () {
  var leftNum = parseInt(getComputedStyle(listEle)["left"]);
  console.log(leftNum);
  if (leftNum < 0) {
    listEle.style.left = leftNum + num + "px";
  }
}, 900);

function debounce(fn, delay) {
  var timer = null;
  return function () {
    if (!timer) {
      fn();
    }
    clearTimeout(timer); // 清除掉上一次的timer ，保证只有一个定时器；
    timer = setTimeout(function () {
      timer = null;
    }, delay);
  };
}

// 回到顶部
var navListEle = document.querySelector(".navList");
var gototop = navListEle.lastElementChild;
// console.log(gototop);
gototop.onclick = function () {
  // 回到顶部 ；
  var timer = setInterval(function () {
    console.log("执行了");
    document.documentElement.scrollTop -= 50;
    if (document.documentElement.scrollTop <= 0) {
      clearInterval(timer);
    }
  }, 10);
};

var tabBtns = document.querySelectorAll(".tabTitle h4");
// console.log(tabBtns);
var tabPlans = document.querySelectorAll(".tabContent .tab-pane");

new Tab(tabBtns, tabPlans);

var lis = document.querySelectorAll(".tab-wraped li");
var divs = document.querySelectorAll(".tab-content .tab-pane");
console.log(divs);
new Tab(lis, divs);
